// banner轮播图
let banner = document.querySelector('.banner_center')
let imgBox = document.querySelector('.banner_center > ul')
let pointBox = document.querySelector('.pointBox')
let bac = document.getElementById('banner')

let col = [
    'rgb(221, 196, 151)',
    'rgb(65, 65, 175)',
    'rgb(197, 190, 190)',
    'rgb(65, 65, 192)',
    'rgb(221, 196, 151)',
    'rgb(7, 7, 121)',
    'rgb(3, 3, 48)',
    'rgb(13, 13, 167)',
    'rgb(221, 196, 151)',
    'rgb(65, 65, 175)',
]

let banner_width = banner.clientWidth
let timer = 0
let index = 1
let flag = true

copyEle()
function copyEle() {
    const first = imgBox.firstElementChild.cloneNode(true)
    const last = imgBox.lastElementChild.cloneNode(true)
    imgBox.appendChild(first)
    imgBox.insertBefore(last, imgBox.firstElementChild)
    imgBox.style.width = imgBox.children.length * 100 + '%'
    imgBox.style.left = -banner_width + 'px'
}

setPoint()
function setPoint() {
    const pointNum = imgBox.children.length - 2
    for (let i = 0; i < pointNum; i++) {
        // 创建节点
        const li = document.createElement('li')
        if (i === 0) li.classList.add('active')
        li.classList.add('item')
        li.dataset.point = i
        pointBox.appendChild(li)
    }
    pointBox.style.width = pointNum * (20 + 5) + 'px'
}

// 自行滚动
autoPlay()
function autoPlay() {
    timer = setInterval(() => {
        index++
        bac.style.background = col[index]
        move(imgBox, { left: -index * banner_width }, moveEnd)
    }, 5000)
}

function moveEnd() {
    // 到最后一张图
    if (index === imgBox.children.length - 1) {
        index = 1
        imgBox.style.left = -index * banner_width + 'px'
        bac.style.background = col[1]
    }
    // 到第一张图
    if (index === 0) {
        index = imgBox.children.length - 2
        imgBox.style.left = -index * banner_width + 'px'
        bac.style.background = col[imgBox.length - 1]
    }
    // 让下方小圆点跟随变化
    for (let i = 0; i < pointBox.children.length; i++) {
        pointBox.children[i].classList.remove('active')
    }
    pointBox.children[index - 1].classList.add('active')
    flag = true
}

overOut()
function overOut() {
    banner.addEventListener('mouseover', () => {clearInterval(timer)})
    banner.addEventListener('mouseout', () => {autoPlay()})
}

bindEvent()
function bindEvent() {
    // 事件委托（给父级绑定点击事件）
    banner.addEventListener('click', (e) => {
        e = e || window.event
        let target = e.target || e.srcElement
        if (target.className === 'left') {
            if (!flag) return
            flag = false
            index--
            bac.style.background = col[index]
            move(imgBox, { left: -index * banner_width }, moveEnd)
        }
        if (target.className === 'right') {
            if (!flag) return
            flag = false
            index++
            bac.style.background = col[index]
            move(imgBox, { left: -index * banner_width }, moveEnd)
        }
        if (target.className === 'item') {
            if (!flag) return
            flag = false
            index = target.dataset.point - 0 + 1
            bac.style.background = col[index]
            move(imgBox, { left: -index * banner_width }, moveEnd)
        }
    })
}

tabChange()
function tabChange() {
    // 当变换页面的时候，让定时器关闭，重新打开页面继续自行滚动
    document.onvisibilitychange = function () {
        if (document.visibilityState === 'hidden') clearInterval(timer)
        if (document.visibilityState === 'visible') autoPlay()
    }
}




let hea_li = document.querySelector('.header_left > li:nth-child(1)')
let hea_ll = document.querySelector('.header_left > li:nth-child(1) > ul > li:nth-child(1)')
let hea_ll1 = document.querySelector('.header_left > li:nth-child(1) > ul > li:nth-child(2)')
let hea_ll2 = document.querySelector('.header_left > li:nth-child(1) > ul > li:nth-child(3)')
let hea_ll3 = document.querySelector('.header_left > li:nth-child(1) > ul > li:nth-child(4)')
let hea_ll4 = document.querySelector('.header_left > li:nth-child(1) > ul > li:nth-child(5)')
let hea_ll11 = document.querySelector('.header_left > li:nth-child(2) > ul > li')
let hea_ll12 = document.querySelector('.header_left > li:nth-child(3) > ul > li')
let nav = document.querySelector('.header .header_left .nav')
let nav_p = document.querySelector('.header .header_left .nav > p')
let str = []
let arr = []
let conut = 0

const xhr = new XMLHttpRequest()
xhr.open('GET', '/sn?callback=headToolbar&_=1631955225482')
xhr.onload = function () {
    let res = xhr.responseText.replace('headToolbar(', '')
    res = res.substr(0, res.length - 3)

    JSON.parse(res).toolbra_daogou.nodes.forEach(function (item) {
        for (let i = 0; i < item.tag.length; i++) {
            str.push(item.tag[i].elementName)
        }
        arr.push(str)
        str = []
    })
        for (let i = 0; i < arr[0].length; i++) {
            hea_ll.innerHTML += `
                <p>${ arr[0][i] }</p>
            `
        }
        for (let i = 0; i < arr[1].length; i++) {
            hea_ll1.innerHTML += `
                <p>${ arr[1][i] }</p>
            `
        }
        for (let i = 0; i < arr[2].length; i++) {
            hea_ll2.innerHTML += `
                <p>${ arr[2][i] }</p>
            `
        }
        for (let i = 0; i < arr[3].length; i++) {
            hea_ll3.innerHTML += `
                <p>${ arr[3][i] }</p>
            `
        }
        for (let i = 0; i < arr[4].length; i++) {
            hea_ll4.innerHTML += `
                <p>${ arr[4][i] }</p>
            `
        }

        JSON.parse(res).toolbar_shangjia.tag.forEach(function (item) {
            hea_ll11.innerHTML += `
                <p>${ item.elementName }</p>
            `
        })
        JSON.parse(res).toolbar_fuwu.tag.forEach(function (item) {
            hea_ll12.innerHTML += `
                <p>${ item.elementName }</p>
            `
        })
}
xhr.send()



// 左侧固定栏
let left_fix = document.querySelector('.left_fix')
let btns = document.querySelectorAll('.left_fix > li.fix')
let backTop = document.querySelector('.left_fix > li:nth-child(7)')
let backTop1 = document.querySelector('.right_fix > ul > li:last-child')
let top_fix = document.querySelector('.top_fix')

let flag1 = true

window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop >= 500) {
        left_fix.style.display = 'block'
    }else {
        left_fix.style.display = 'none'
    }
    for (let i = 0; i < btns.length; i++) {
        btns[i].dataset.index = i
        btns[i].onclick = handler
        function handler() {
            flag1 = false
            let index = this.dataset.index - 0
            for (let i = 0; i < btns.length; i++) {
                btns[i].classList.remove('active')
                window.scrollTo({
                    top: 1050 + 330 * index,
                    behavior: 'smooth'
                })
            }
            btns[index].classList.add('active')
            if (scrolltop === 1050 + 330 * index) {
                flag1 = true
            }
        }
    }
    
    for (let i = 0; i < 5; i++) {
        if (!flag1) return
        if (scrollTop >= 1050 + 330 * i) {
            btns[i].nextSibling.nextSibling.classList.remove('active')
            btns[i].previousSibling.previousSibling.classList.remove('active')
            btns[i].classList.add('active')
        }
    }
    
    backTop.onclick = function () {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }
    backTop1.onclick = function () {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }
    if (scrollTop >= 1050) {
        top_fix.style.display = 'block'
    }else {
        top_fix.style.display = 'none'
    }

    bac.onmousemove = function moveHandler(e) {
        e = e || window.event
        let x = e.clientX
        let y = e.clientY + scrollTop
        if (x < 165 || x > 1355 || y < 190 || y > 660) {
            if (!flag) return
            for (let i = 0; i < ban_btns.length; i++) {
                ban_listli[i].classList.remove('active')
            }
        }
    }
}


// 粘性搜索框
let topFix_left = document.querySelector('.top_fix > .content > .topFix_left')
let top_fixul = document.querySelector('.top_fix > .content > .top_fixul')

topFix_left.onmouseover = function () {
    top_fixul.style.display = 'block'
}

top_fixul.onmouseover = function () {
    top_fixul.style.display = 'block'
}

topFix_left.onmouseout = function () {
    top_fixul.style.display = 'none'
}

top_fixul.onmouseout = function () {
    top_fixul.style.display = 'none'
}



// banner选项卡
let listul = document.querySelector('.banner > .content > .list')
let ban_btn = document.querySelector('.banner > .content > .list > ul:nth-child(1)')
let ban_btns = document.querySelectorAll('.banner > .content > .list > ul:nth-child(1) > li')
let ban_listli = document.querySelectorAll('.banner > .content > .list > li')
let ban_content = document.querySelector('.banner > .content')
let ban_right = document.querySelector('.banner > .content > .content_right')


for (let i = 0; i < ban_btns.length; i++) {
    ban_btns[i].dataset.index = i
    ban_btns[i].onmouseover = banOver
}
function banOver() {
    var ban_index = this.dataset.index - 0
    for (let i = 0; i < ban_btns.length; i++) {
        ban_listli[i].classList.remove('active')
    }
    ban_listli[ban_index].classList.add('active')
}



// banner列表栏
let listol = document.querySelector('.banner > .content > .list > li > ol')
let arr1 = []
let arr2 = []
let num = ''

const xhr1 = new XMLHttpRequest()
xhr1.open('GET', '/list?callback=threeSortLoad')
xhr1.onload = function () {
    let res = xhr1.responseText.replace('threeSortLoad(', ' ')
    res = res.substr(0, res.length - 3)
    console.log(JSON.parse(res))

    let s1 = JSON.parse(res).allsort.nodes
    for (let i = 0; i < s1.length; i++) {
        let a1 = s1[i].nodes
        for (let j = 0; j < a1.length; j++) {
            let d1 = a1[1].tag
            for (let l = 0; l < d1.length; l++) {
                if (arr1.indexOf(d1[l].elementName) === -1) {
                    arr1.push(d1[l].elementName)
                }
            }
        }
        arr2.push(arr1)
        arr1 = []
    }
    for (let i = 0; i < arr2[0].length; i++) {
        listol.innerHTML += `
            <li>${ arr2[0][i] }</li>
        `
    } 
}
xhr1.send()


// let inputFind = document.querySelector('.inputbox > .content > .input_right > input')

// inputFind.oninput = function () {
//     const word = this.value.trim()
//     let time = new Date()
//     const xhr2 = new XMLHttpRequest()
//     xhr2.open('GET', 'https://ds.suning.com/ds/his/new/' + word + '-0-1_0-autoComplateCallback_184b31b125a59d8c382d3d8382d23350.jsonp?callback=autoComplateCallback_184b31b125a59d8c382d3d8382d23350&'+ time +'')
//     xhr2.onload = function () {
//         let res = xhr2.responseText.replace('autoComplateCallback_184b31b125a59d8c382d3d8382d23350(', '')
//         // res = res.substr(0, res.length - 2)
//         console.log(res)
//     }
//     xhr2.send()
// }

// inputFind.oninput = function () {
//     const word = this.value.trim()
//     let time = new Date()
//     const script = document.createElement('script')
// script.src = 'https://ds.suning.com/ds/his/new/-gre-0-1_0-autoComplateCallback_184b31b125a59d8c382d3d8382d23350.jsonp?callback=autoComplateCallback_184b31b125a59d8c382d3d8382d23350'
// document.body.appendChild(script)
//     script.remove()
// }
// https://ds.suning.com/ds/his/new/' + word + '-0-1_0-autoComplateCallback_184b31b125a59d8c382d3d8382d23350.jsonp?callback=autoComplateCallback_184b31b125a59d8c382d3d8382d23350
// https://ds.suning.com/ds/his/new/-sgs-0-1_0-autoComplateCallback_184b31b125a59d8c382d3d8382d23350.jsonp?callback=autoComplateCallback_184b31b125a59d8c382d3d8382d23350&_=1632552287659
